<template>
  <div class="container">
    <div class="head__row flex-3">
      <span class="title">申请基础信息</span>
      <span class="title__sub">{{item.finishStatus}}</span>
    </div>
    <table class="table__detail">
      <tbody>
        <tr class="tr__1">
          <td class="column__key">项目名称</td>
          <td class="column__value" colspan="3">{{item.name}}</td>
          <td class="column__key">联系方式</td>
          <td class="column__value">{{item.mobilephone}}</td>
        </tr>
        <tr class="tr__1">
          <td class="column__key">股侠ID</td>
          <td class="column__value">{{item.operaterName}}({{item.operaterRealName}})</td>
          <td class="column__key">项目总金额</td>
          <td class="column__value">{{item.raiseAmount}}</td>
          <td class="column__key">投资人数</td>
          <td class="column__value">{{item.investorCount}}</td>
        </tr>
        <tr class="tr__1">
          <td class="column__key">合买类型</td>
          <td class="column__value">{{item.type}}</td>
          <td class="column__key">保底收益</td>
          <td class="column__value">{{item.yeild}}%</td>
          <td class="column__key">股侠分成</td>
          <td class="column__value">{{item.shareRate}}%</td>
        </tr>
        <tr class="tr__1">
          <td class="column__key">项目周期</td>
          <td class="column__value">T + {{item.timeLimit}}</td>
          <td class="column__key">领投金额</td>
          <td class="column__value">{{item.operateInvestAmount}}</td>
          <td class="column__key">项目总额</td>
          <td class="column__value">{{item.raiseAmount}}</td>
        </tr>
        <tr class="tr__1">
          <td class="column__key">项目杠杆</td>
          <td class="column__value">1:{{item.leverageRate}}</td>
          <td class="column__key">项目成立日</td>
          <td class="column__value">{{formatDay(item.startTime)}}</td>
          <td class="column__key">项目开始操盘日期</td>
          <td class="column__value">{{formatDay(item.operateStartTime)}}</td>
        </tr>
      </tbody>
    </table>
    <div class="head__row flex-3">
      <span class="title">项目结算信息</span>
      <span class="title__sub" @click="previewCalculate">查看计算公式</span>
    </div>
    <table class="table__detail">
      <tbody>
        <tr class="tr__1">
          <td class="column__key">运行自然日</td>
          <td class="column__value">{{item.naturalDays}}</td>
          <td class="column__key">此次结束金额</td>
          <td class="column__value">{{item.settleAmount}}</td>
          <td class="column__key">此次结束比例</td>
          <td class="column__value">{{item.settleRate * 100}}%</td>
        </tr>
        <tr class="tr__1">
          <td class="column__key">股侠结算金额</td>
          <td class="column__value">{{item.operateSettleAmount}}</td>
          <td class="column__key">项目管理费</td>
          <td class="column__value">{{item.manageAmount}}</td>
          <td class="column__key">投资人结算总金额</td>
          <td class="column__value">{{item.totalInvestorAmount}}</td>
        </tr>
      </tbody>
    </table>
    <ATable :table-title="tableTitle" :table-data="tableData" class="table__contaienr"/>
    <div class="btn__box">
      <div class="btn__default btn__confirm" @click="settle" v-if="item.repaymentCollectStatus == 0">还款代收</div>
      <div class="btn__default btn__confirm" @click="confirm" v-if="type == 1">已核对，确认结算</div>
      <div class="btn__default" :class="type == 0 ? 'btn__confirm': 'btn__back'" @click="goBack">返回</div>
    </div>
    <div class="preview__box" @click="hidePreview" v-show="previewStatus">
      <img src="../assets/images/calculate__img.png" alt="">
    </div>
  </div>
</template>

<script>
import {ATable} from '@/components';
import Api from '@/api';
import dayjs from 'dayjs';
import { Message } from 'iview';
export default {
  name: 'clearingdetail',
  components: {
    ATable,
  },
  props: {
    type: {
      required: true,
      type: [String, Number]
    },
    amount: {
      required: true,
      type: [String, Number]
    },
    id: {
      required: true,
      type: [String, Number]
    },
  },
  data() {
    return {
      retrunStatus: false,
      item: {

      },
      previewStatus: false,
      commit: '',
      passStatus: false,
      refuseStatus: false,
      tableTitle: ['投资人ID', '投资本金', '结算本金', '保本收益', '分成收益', '结算总金额',],
      tableData: {
        list: [
          [
            // {
            //   value: '天下第一',
            // },
            // {
            //   value: '哈哈侠',
            // },
            // {
            //   value: '3',
            // },
            // {
            //   value: '2018-06-03 12：00',
            // },
          ]
        ],
      },
    }
  },
  beforeRouteEnter (to, from, next) {
    console.log(to);
    next(vm => {
      const { settle } = to.query;
      if(settle == '1') {
        vm.retrunStatus = true;
      }
    });
  },
  created() {
    this.getSettleDetail();
    if(this.type != 0 ) {
    }
    this.commit = this.item.auditOpinion;
  },
  methods: {
    getSettleDetail() {
      Api.setSettleDetail({projectId: this.id, settleAmount: this.amount}).then(res => {
        console.log(res);
        this.item = res.data;
        const { investorList } = res.data;
        if(investorList) {
          this.tableData.list = investorList.map(val => {
            return [
              { value : val.investorUserName},
              { value : val.principalAmount},
              { value : val.settlePrincipalAmount},
              { value : val.yeildProfit},
              { value : val.shareProfit},
              { value : val.settleAmount},
            ]
          })
        }
      }).catch(err => {
        this.goBack();
      });
    },
    confirm() {
      Api.finishSettle({projectId: this.id}).then(res => {
        Message.success({content: res.message});
        // console.log(res)
        this.goBack();
      });
    },
    settle() {
      console.log(location.href);
      Api.repaymentCollect({projectId: this.id, returntUrl: location.href + '?settle=1'}).then(res => {
        console.log(res)
        const { redirectUrl } = res.data;
        if(redirectUrl) {
          location.href = redirectUrl;
        }
      })
    },
    goBack() {
      this.$router.push({name: 'clearing'});
      console.log('返回');
    },
    formatDay(time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm')
    },
    previewCalculate() {
      this.previewStatus = true;
    },
    hidePreview() {
      this.previewStatus = false;
    },
  }
};
</script>

<style lang="stylus" scoped>
.head__row 
  font-size: 20px;
  margin-bottom: 20px
.title__sub
  color: red;
  cursor pointer
  font-size 16px
.table__detail
  font-size 16px
  text-indent: 4px
  border: 1px solid #999;
  border-collapse: collapse;
  margin-bottom 20px;
  tr, td 
    border: 1px solid #999;
.column__key
  background: #ddd
  width 140px
.tr__1
  height 40px;
.tr__2
  height 90px
.btn__box 
  display: flex
  margin-top: 20px
  justify-content center
.btn__default 
  width: 160px
  height 30px
  margin 0 40px;
.btn__back
  border: 1px solid #333
  background #dddddd
  color #333
.preview__box
  position fixed
  top: 0
  left: 0
  width: 100%
  height: 100%
  background rgba(0,0,0,.9)
  img 
    position absolute 
    top: 50%
    left: 50%
    transform translate(-50%, -50%)
    width: auto
    height: 80%
</style>
